<cd-table [data]="filterInDevices"
          [columns]="columns"
          identifier="uid"
          [forceIdentifier]="true"
          [selectionType]="selectionType"
          columnMode="flex"
          [autoReload]="false"
          [searchField]="false">
  <div class="table-filters form-inline"
       *ngIf="filters.length !== 0">
    <div class="form-group filter tc_filter"
         *ngFor="let filter of filters">
      <label class="col-form-label"><span>{{ filter.label }}</span><span>: </span></label>
      <select class="custom-select"
              [(ngModel)]="filter.value"
              [ngModelOptions]="{standalone: true}"
              (ngModelChange)="onFilterChange()"
              [disabled]="filter.disabled">
        <option *ngFor="let opt of filter.options"
                [value]="opt.value">{{ opt.formatValue }}</option>
      </select>
    </div>
    <div class="widget-toolbar tc_refreshBtn"
         *ngIf="filters.length !== 0">
      <button type="button"
              title="Reset filters"
              class="btn btn-light"
              (click)="onFilterReset()">
        <span [ngClass]="[icons.stack]">
          <i [ngClass]="[icons.filter, icons.stack2x]"></i>
          <i [ngClass]="[icons.destroy, icons.stack1x]"></i>
        </span>
      </button>
    </div>
  </div>
</cd-table>

<ng-template #osds
             let-value="value">
  <span *ngFor="let osdId of value; last as last">
    <span class="badge badge-dark">osd.{{ osdId }}</span>
    <span *ngIf="!last">&nbsp;</span>
  </span>
</ng-template>
